<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js"></script>
    <script src="../js/pageMe.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: #af4248;
        text-align: center;
      }
      .content {
        width: 600px;

        background: white;
        margin: 0 auto;
      }
      input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 0;
      }
      li {
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div class="content">
      <input type="text" class="addtext" />
      <ul></ul>
      <div id="page"></div>
    </div>
    <script>
         // 默认的页数
      let pageNum = 1;
      let totalNum = 0
      let totalList = 0
     function setpage(){
      $("#page").paging({
        pageNum, // 当前页面
        totalNum, // 总页码
        totalList, // 记录总数量
        callback: function (num) {
             // 默认的页数
        pageNum = num;
          //回调函数
          getdata()
        },
      });
     }
     
      // 是否是修改状态
      let edittype = false;
      // 修改
      function edittext(text, id) {
        $(".addtext").val(text);
        $(".addtext").attr("data-id", id);
        edittype = true;
      }
      // 删除
      function dellist(id) {
        console.log(id);
        $.ajax({
          url: "http://192.168.123.152:8000/comment/remove/" + id,
          type: "delete",
          headers: {
            Authorization: token,
          },
          success: function (res) {
            console.log(res);
            if (res.code != "0") return alert(res.message);
            // //    更新列表
            getdata();
          },
        });
      }
      // 添加内容
      $(".addtext").keyup(function (e) {
        if (e.keyCode == 13) {
          // 判断是否是修改状态
          if (edittype) {
            // 获取到输入的内容
            $.ajax({
              url:
                "http://192.168.123.152:8000/comment/edit/" +
                $(this).attr("data-id"),
              type: "put",
              data: {
                text: $(this).val(),
              },
              headers: {
                Authorization: token,
              },
              success: function (res) {
                console.log(res);
                if (res.code != "0") return alert(res.message);
                //    更新列表
                getdata();
                edittype = false;
              },
            });
          } else {
            // 获取到输入的内容
            $.ajax({
              url: "http://192.168.123.152:8000/comment/add",
              type: "post",
              data: {
                text: $(this).val(),
              },
              headers: {
                Authorization: token,
              },
              success: function (res) {
                console.log(res);
                if (res.code != "0") return alert(res.message);
                //    更新列表
                getdata();
              },
            });
          }
        }
      });
      let token = JSON.parse(localStorage.getItem("userinfo")).token;
      console.log(token);
      // 存放列表数据
      let list = [];

      getdata();
      // 获取列表数据
      function getdata() {
        $.ajax({
          url: "http://192.168.123.152:8000/comment/list",
          type: "post",
          data: {
            pageSize: 10,
            pageNum,
          },
          headers: {
            Authorization: token,
          },
          success: function (res) {
            console.log(res.result);
            // 分页器参数
            totalList = res.result.total //总条数
            totalNum = Math.floor(res.result.total/10)  //计算得到的总分页数
            // 渲染分页器
            setpage()
            list = res.result.list.map((item) => {
              item.updatedAt = dayjs(item.updatedAt).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              return item;
            });
            // 渲染dom
            setdom();
          },
        });
      }
      function setdom() {
        let lis = "";
        list.forEach((item) => {
          lis += `  
                 <li>
            <span>${item.real_name}：</span>
            <span class="itemtext" onclick="edittext('${item.text}',${item.id})">${item.text}</span>
            <span>${item.updatedAt}</span>
            <span onclick="dellist(${item.id})">X</span>
            </li>
                `;
        });
        $("ul").html(lis);
      }
    </script>
  </body>
</html>
